// 使用示例
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Button, Card } from './dist/my-react-component.js';
import './dist/my-react-component.css';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>My React Component Library 示例</h1>
      
      <Card title="基本按钮" style={{ marginBottom: '20px' }}>
        <Button type="primary">主要按钮</Button>
        <Button style={{ marginLeft: '10px' }}>默认按钮</Button>
        <Button type="dashed" style={{ marginLeft: '10px' }}>虚线按钮</Button>
        <Button type="link" style={{ marginLeft: '10px' }}>链接按钮</Button>
      </Card>

      <Card title="禁用状态" style={{ marginBottom: '20px' }}>
        <Button type="primary" disabled>禁用主要按钮</Button>
        <Button disabled style={{ marginLeft: '10px' }}>禁用默认按钮</Button>
      </Card>

      <Card title="危险按钮">
        <Button type="primary" danger>危险主要按钮</Button>
        <Button danger style={{ marginLeft: '10px' }}>危险默认按钮</Button>
      </Card>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);